<template>
  <!--这里如果包裹一层div的话，asider收缩的时候，menu-item的图标显示不正常-->
  <!--<div class="div-container">-->
    <template v-for="(item, index) in menuTreeData" :key="index">
      <el-menu-item
        v-if="!item.isParent"
        :index="item.path"
        :key="item.id">
        <template #title><el-icon :class="item.iconCls == null ? 'icon-tasks' : item.iconCls" /> {{item.name}}</template>
      </el-menu-item>
      <!--<el-submenu index="1-4">-->
      <!--  <el-icon><location /></el-icon>-->
      <!--  <template #title>item four</template>-->
      <!--  <el-menu-item index="1-4-1">item one</el-menu-item>-->
      <!--  <el-menu-item index="1-4-2">item two</el-menu-item>-->
      <!--  <el-menu-item index="1-4-3">item three</el-menu-item>-->
      <!--</el-submenu>-->
      <el-submenu
        v-if="item.isParent && item.children && item.children.length > 0"
        :index="item.id + ''"
        :key="item.id">
        <template #title>
          <el-icon :class="item.iconCls == null ? 'icon-tasks' : item.iconCls" />
          {{item.name}}
        </template>
        <menu-tree :menuTreeData="item.children"></menu-tree>
      </el-submenu>
    </template>
  <!--</div>-->
</template>

<script>
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
  name: 'MenuTree',
  props: {
    menuTreeData: Array
  },
  setup () {
    const initAwesomeIcon = (iconName) => {
      // iconName需要是： fas search 这样的格式
      let iconArray = ['fas', 'tasks'];
      if (iconName) {
        iconArray = iconName.split(' ');
      }
      // console.log('MenuTree.vue >>> stup() >> initAwesomeIcon', iconArray);
      return iconArray;
    };
    onMounted(() => {
      // isCollapse.value = false;
      // const abc = 'fas paython';
      // initAwesomeIcon(abc);
    });
    return {
      initAwesomeIcon
    };
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-icon {
  font-size: 16px !important;
  //margin-right: 2px;
}
</style>
